<template>
  <div class="header">
    <el-container>
      <el-header class="head" style="height: 49px">
        <div class="head-content">
          <div class="logo">
            <a href="/"></a>
          </div>
          <nav>
            <router-link
              v-for="(item, idx) in navList"
              :key="idx"
              :to="item.href"
              >{{ item.title }}</router-link
            >
          </nav>
          <div class="userMsg">
            <p class="rm">
              <a href="">上传简历</a>
              <a href="">我要找工作</a>
              <a href="">我要招聘</a>
            </p>
            <p class="lg-rg">
              <router-link v-show="!Boolean(showName)" :to="{path:'/register'}">注册</router-link>
              <router-link v-show="!Boolean(showName)" :to="{path:'/login'}">登录</router-link>
              <a class="showname" v-show="Boolean(showName)">{{showName}}</a>
              <!-- <a href="/register">注册</a> -->
              <!-- <a href="/login">登录</a> -->
            </p>
          </div>
        </div>
      </el-header>
    </el-container>
  </div>
</template>

<script>
import tools from '@/tools'
import { getNavData } from "@/api";

export default {
  name: "Header",
  data() {
    return {
      navList: [],
      showName: '',
    };
  },
  created() {
    // this.showName = tools.getCookie("loginUserName") || '';
    getNavData().then((res) => {
      this.navList = res.data;
    });
  },
  mounted() {
    
    let objStr;
      // debugger
    if(localStorage.getItem("userInfo")){
      objStr = JSON.parse(localStorage.getItem("userInfo"));
    }
      console.log(111,objStr,objStr.phoneNumber)
    this.showName = objStr.phoneNumber;
  },
};
</script>

<style scoped lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: white;
  .head {
    width: 100%;
    background: #202329;
    height: 49px;
    .head-content {
      width: 1184px;
      display: flex;
      margin: 0 auto;
      line-height: 49px;
      justify-content: space-between;
      .logo {
        margin-right: 30px;
        a {
          display: inline-block;
          vertical-align: middle;
          width: 125px;
          height: 36px;
          background: url(https://static.zhipin.com/zhipin-geek/v537/web/geek/images/logo-2x.png)
            no-repeat 3px 7px;
          background-size: 110px;
        }
      }
      nav {
        a {
          color: white;
          font-size: 14px;
          margin-right: 27px;
          &:hover {
            color: #00d7c6;
          }
          &.router-link-exact-active {
            color: #00d7c6;
          }
        }
      }
      .userMsg {
        .rm {
          display: inline-block;
          font-size: 14px;
          a {
            color: white;
            margin: 0 15px;
            &:hover {
              color: #00d7c6;
            }
          }
        }
        .lg-rg {
          display: inline-block;
          font-size: 13px;
          a {
            border: 1px solid #00d7c6;
            border-radius: 15px;
            padding: 2px 10px;
            color: white;
            margin: 0 15px;
            &:hover {
              color: #00d7c6;
            }
          }
        }
      }
    }
  }
}
</style>